<template>
  <div>
    <div id="title">
      <h1>全国用户分布情况：</h1>
    </div>
    <div id="china_map" :style="{ width: width, height: '800px' }"></div>
  </div>
</template>

<script>
import china from "echarts/map/json/china.json"; //中国地图
export default {
  name: "UserDistribution",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      series_data: [],
    }
  },
  methods: {
    setMapData() {
      // 初始化echarts实例 #D8E9FD
      this.$echarts.registerMap("china", china);
      this.chinachart = this.$echarts.init(document.getElementById("china_map"));
      // 进行相关配置
      this.chartOption = {
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
          formatter(params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let localValue, perf, downloadSpeep, usability, point;
            if (params.data) {
              localValue = params.data.value;
              perf = params.data.perf;
              downloadSpeep = params.data.downloadSpeep;
              usability = params.data.usability;
              point = params.data.point;
            } else {
              // 为了防止没有定义数据的时候报错写的
              localValue = 0;
              perf = 0;
            }
            return `
          <div style='font-size:18px;'> ${params.name}</div>
          <p style='text-align:left;margin-top:-4px;'>
              用户数量：${localValue}<br/>
              占比：${perf}<br/>
          </p>
        `;
          },
          backgroundColor: "#ff7f50", //提示标签背景颜色
          textStyle: {color: "#fff"}, //提示标签字体颜色
        },
        visualMap: {
          show: true,
          bottom: 60,
          right: 200,
          text: ["高", "低"],
          //  min:0,
          //   precision:0,
          itemHeight: 200,
          color: [
            "#5475f5",
            "#9feaa5",
            "#85daef",
            "#74e2ca",
            "#e6ac53",
            "#9fb5ea",
          ],
        },
        // geo配置详解： https://echarts.baidu.com/option.html#geo
        geo: {
          // 地理坐标系组件用于地图的绘制
          map: "china", // 表示中国地图
          // roam: true, // 是否开启鼠标缩放和平移漫游
          zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
          label: {
            // show: true
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            normal: {
              //未选中的状态
              borderColor: "#ffffff",
              areaColor: "#D8E9FD", //背景颜色
              label: {
                // show: true, //显示名称
              },
            },
            emphasis: {
              //选中的状态
              // 高亮状态下的多边形和标签样式
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.5)",
              borderColor: "#fff",
              areaColor: "#DA3A3A",
            },
          },
        },
        series: [
          {
            name: "地图", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
            type: "map",
            geoIndex: 0,
            label: {
              show: true,
            },
            // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
            data: this.series_data,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示地图数据
      this.chinachart.setOption(this.chartOption);
    },
  },
  mounted() {
    this.setMapData()
    this.request.get("/admin/getNewestIp").then(res => {
      console.log(res)
      if (res.state === 200) {
        let cnt = 0
        let data = []
        for (let i = 0; i < res.data.length; i++) {
          data.push({name: res.data[i].name, value: res.data[i].value, perf: 0})
          cnt += res.data[i].value
        }
        for (let i = 0; i < data.length; i++) {
          let p = data[i].value / cnt * 100
          data[i].perf = p.toString().substring(0, 5) + '%'
        }
        this.series_data = data
        this.setMapData()
      }
    })
  }
}
</script>

<style scoped>
#title {
  text-align: center;
  color: #636060;
}
</style>
